<script setup lang="ts">
import Logo from '@/components/Logo.vue';
import { reactive, computed } from 'vue';
import { useLocale } from 'vuetify';
import { useUserStore } from '@/store/userStore';

const { t } = useLocale();
const userStore = useUserStore();

// 获取当前用户角色
const currentRole = computed(() => userStore.role);

// 根据角色获取菜单项
const getMenuItems = computed(() => {
  const baseItems = [
    // 核心功能
    { type: 'subheader', title: '核心功能' },
    {
      title: t('dashboard'),
      props: {
        prependIcon: 'mdi-view-dashboard-outline',
        link: true,
        to: '/main',
        exact: true
      },
      value: '/main'
    }
  ];

  // 根据角色添加不同的菜单项
  switch (currentRole.value) {
    case 'ADMIN':
      // 管理员：显示核心管理功能
      return [
        ...baseItems,
        {
          title: '值班安排',
          props: {
            prependIcon: 'mdi-calendar-clock-outline',
            link: true,
            to: '/duty-schedule',
            exact: true
          },
          value: '/duty-schedule'
        },
        { type: 'subheader', title: '心理咨询' },
        {
          title: '初访预约申请',
          props: {
            prependIcon: 'mdi-account-plus-outline',
            link: true,
            to: '/initial-appointment',
            exact: true
          },
          value: '/initial-appointment'
        },
        {
          title: '预约管理',
          props: {
            prependIcon: 'mdi-calendar-check-outline',
            link: true,
            to: '/appointment-management',
            exact: true
          },
          value: '/appointment-management'
        },
        {
          title: '预约审核',
          props: {
            prependIcon: 'mdi-clipboard-check-outline',
            link: true,
            to: '/appointment-review',
            exact: true
          },
          value: '/appointment-review'
        },
        {
          title: '咨询师管理',
          props: {
            prependIcon: 'mdi-account-tie-outline',
            link: true,
            to: '/consultant-management',
            exact: true
          },
          value: '/consultant-management'
        },
        {
          title: '用户信息管理',
          props: {
            prependIcon: 'mdi-account-group-outline',
            link: true,
            to: '/psychological-users',
            exact: true
          },
          value: '/psychological-users'
        },
        {
          title: '咨询预约审核',
          props: {
            prependIcon: 'mdi-clipboard-check-outline',
            link: true,
            to: '/assistant/appointment-review',
            exact: true
          },
          value: '/assistant/appointment-review'
        },
        {
          title: '咨询安排记录',
          props: {
            prependIcon: 'mdi-calendar-check-outline',
            link: true,
            to: '/assistant/arrangement-records',
            exact: true
          },
          value: '/assistant/arrangement-records'
        },
        {
          title: '初访预约管理',
          props: {
            prependIcon: 'mdi-clipboard-list-outline',
            link: true,
            to: '/initial-visitor-appointments',
            exact: true
          },
          value: '/initial-visitor-appointments'
        },
        {
          title: '初访记录',
          props: {
            prependIcon: 'mdi-file-document-outline',
            link: true,
            to: '/initial-visitor-records',
            exact: true
          },
          value: '/initial-visitor-records'
        },
        { type: 'subheader', title: '个人中心' },
        {
          title: '个人资料',
          props: {
            prependIcon: 'mdi-account-outline',
            link: true,
            to: '/profile',
            exact: true
          },
          value: '/profile'
        }
      ];

    case 'STUDENT':
      // 学生：只有初访申请和查询申请功能
      return [
        ...baseItems,
        { type: 'subheader', title: '心理咨询' },
        {
          title: '初访预约申请',
          props: {
            prependIcon: 'mdi-account-plus-outline',
            link: true,
            to: '/initial-appointment',
            exact: true
          },
          value: '/initial-appointment'
        },
        {
          title: '我的预约查询',
          props: {
            prependIcon: 'mdi-calendar-check-outline',
            link: true,
            to: '/appointment-management',
            exact: true
          },
          value: '/appointment-management'
        },
        { type: 'subheader', title: '个人中心' },
        {
          title: '个人资料',
          props: {
            prependIcon: 'mdi-account-outline',
            link: true,
            to: '/profile',
            exact: true
          },
          value: '/profile'
        }
      ];

    case 'INITIAL_VISITOR':
      // 初访员：初访结果录入功能
      return [
        ...baseItems,
        { type: 'subheader', title: '初访管理' },
        {
          title: '初访预约管理',
          props: {
            prependIcon: 'mdi-clipboard-list-outline',
            link: true,
            to: '/initial-visitor-appointments',
            exact: true
          },
          value: '/initial-visitor-appointments'
        },
        {
          title: '初访记录录入',
          props: {
            prependIcon: 'mdi-file-document-outline',
            link: true,
            to: '/initial-visitor-records',
            exact: true
          },
          value: '/initial-visitor-records'
        },
        { type: 'subheader', title: '个人中心' },
        {
          title: '个人资料',
          props: {
            prependIcon: 'mdi-account-outline',
            link: true,
            to: '/profile',
            exact: true
          },
          value: '/profile'
        }
      ];

    case 'ASSISTANT':
      // 咨询助理：安排咨询功能
      return [
        ...baseItems,
        { type: 'subheader', title: '咨询安排' },
        {
          title: '咨询预约审核',
          props: {
            prependIcon: 'mdi-clipboard-check-outline',
            link: true,
            to: '/assistant/appointment-review',
            exact: true
          },
          value: '/assistant/appointment-review'
        },
        {
          title: '咨询安排记录',
          props: {
            prependIcon: 'mdi-calendar-check-outline',
            link: true,
            to: '/assistant/arrangement-records',
            exact: true
          },
          value: '/assistant/arrangement-records'
        },
        {
          title: '预约管理',
          props: {
            prependIcon: 'mdi-calendar-check-outline',
            link: true,
            to: '/appointment-management',
            exact: true
          },
          value: '/appointment-management'
        },
        { type: 'subheader', title: '个人中心' },
        {
          title: '个人资料',
          props: {
            prependIcon: 'mdi-account-outline',
            link: true,
            to: '/profile',
            exact: true
          },
          value: '/profile'
        }
      ];

    case 'CONSULTANT':
      // 咨询师：学生管理和个人资料
      return [
        ...baseItems,
        { type: 'subheader', title: '咨询管理' },
        {
          title: '我的学生管理',
          props: {
            prependIcon: 'mdi-account-group-outline',
            link: true,
            to: '/consultant/student-management',
            exact: true
          },
          value: '/consultant/student-management'
        },
        { type: 'subheader', title: '个人中心' },
        {
          title: '个人资料',
          props: {
            prependIcon: 'mdi-account-outline',
            link: true,
            to: '/profile',
            exact: true
          },
          value: '/profile'
        }
      ];

    default:
      // 默认：只显示仪表板和个人资料
      return [
        ...baseItems,
        { type: 'subheader', title: '个人中心' },
        {
          title: '个人资料',
          props: {
            prependIcon: 'mdi-account-outline',
            link: true,
            to: '/profile',
            exact: true
          },
          value: '/profile'
        }
      ];
  }
});

const items = getMenuItems;

const drawerProps = reactive({
  rail: false,
  railWidth: 256,
  icon: 'mdi-arrow-left'
});

const handleDrawerWidth = () => {
  const rail = drawerProps.rail;
  const railWidth = drawerProps.railWidth;
  drawerProps.rail = !rail;
  drawerProps.railWidth = railWidth == 64 ? 256 : 64;
  drawerProps.icon = drawerProps.railWidth === 256 ? 'mdi-arrow-expand-left  ' : 'mdi-arrow-expand-right';
};

const menus = computed(() => {
  if (drawerProps.railWidth === 256) {
    return items.value;
  } else {
    return items.value.filter((item) => {
      return item.type !== 'subheader';
    });
  }
});
</script>

<template>
  <VNavigationDrawer :rail-width="drawerProps.railWidth" :rail="drawerProps.rail" :border="true" :elevation="1">
    <VToolbar class="px-3" color="transparent">
      <Logo :height="26" />
      <VToolbarTitle>SoulBit</VToolbarTitle>
    </VToolbar>
    <div class="app-drawer__inner">
      <VList :items="menus" color="primary" class="menu-list" nav :slim="true" />
    </div>
    <VBtn
      class="btn-collapse"
      rounded="lg"
      color="white"
      size="x-small"
      :icon="drawerProps.icon"
      @click="handleDrawerWidth"
      :style="{ left: drawerProps.railWidth - 12 + 'px' }"
    />
  </VNavigationDrawer>
</template>

<style lang="scss">
.btn-collapse {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
}
.menu-list {
  .v-list-subheader__text {
    text-transform: uppercase;
  }
  .v-list-item__prepend > .v-icon {
    margin-inline-end: 16px;
  }
  .v-list-item-title {
    text-transform: capitalize;
  }
}
</style>